<template>
  <div>
    <el-breadcrumb class="app-breadcrumb" separator="/">
      <transition-group name="breadcrumb">
        <div
          v-for="(item, index) in levelList"
          :key="item.path"
          class="titleMenu"
          :class="{ isnew: index === current }"
        >
          <!-- <span
          v-if="item.redirect==='noRedirect'||index==levelList.length-1"
          class="no-redirect"
          >{{ item.meta.title }}</span>-->
          <div @click="handleLink(item, index)">
            <img class="level-icon" v-bind:src="item.img" alt="" />
            <a :class="{ actived: index === current }">{{ item.meta.title }}</a>
          </div>
        </div>
      </transition-group>
    </el-breadcrumb>
    <div class="moreMenu" v-if="isMore">
      <el-dropdown @command="handleCommand" trigger="click">
        <i class="el-icon-more" style="width: 55px; text-align: center"></i>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            :class="{ isActived: index === current - levelList.length }"
            :command="{ item, index }"
            v-for="(item, index) in moreMenu"
            :key="item.path"
            >{{ item.meta.title }}</el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <el-dialog
      title="请选择需管理的项目负责人工作台"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <el-form :inline="true" label-width="100px">
        <el-form-item label="项目负责人" prop="projectLeader">
          <el-select
            v-model="projectLeaderName"
            placeholder="请选择"
            clearable
            size="small"
            style="width: 240px"
          >
            <el-option
              v-for="item in options"
              :key="item.leader"
              :label="item.nickName"
              :value="item.leader"
            >
              <span style="float: left">{{ item.nickName }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{
                item.jobNo
              }}</span>
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <!--<el-button @click="dialogVisible = false">取 消</el-button>-->
        <el-button type="primary" @click="sumbit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import pathToRegexp from "path-to-regexp";
import { mapGetters } from "vuex";
import { adminAuthorizeLeaderList } from "@/api/projectleader/adminAuthorize";
export default {
  data() {
    return {
      current: 0,
      levelList: null,
      leftRoutes: [],
      srceenWidth: document.body.clientWidth,
      isMore: false,
      moreMenu: [],
      options: [],
      dialogVisible: false,
      projectLeaderName: null,
      projectLeaderItem: [],
      menuList: [],
    };
  },
  computed: {
    ...mapGetters(["permission_routes"]),
  },
  watch: {
    $route(route) {
      // if you go to the redirect page, do not update the breadcrumbs
      if (route.path.startsWith("/redirect/")) {
        return;
      }
      this.getBreadcrumb();

      if (
        this.$route.name === "首页" ||
        this.$route.name === "消息中心" ||
        this.$route.name === "便签" ||
        this.$route.name === "Profile" ||
        this.$route.name === "流程查询"
      ) {
        this.current = -1;
      } else if (
        this.$route.path === "/TestList/docSearch" ||
        this.$route.path === "/projectShowPage/projectShowPage" ||
        this.$route.path === "/report/fineReport"
      ) {
        sessionStorage.setItem("nowPath", route.matched[0].name);
      } else {
        sessionStorage.setItem("nowPath", route.matched[0].name);
        this.getLeftMenu();
      }
    },
    srceenWidth(val) {
      this.srceenWidth = val;
      this.getBreadcrumb();
    },
  },

  mounted() {
    this.srceenWidth = document.body.clientWidth;
    this.getBreadcrumb();
    this.getLeftMenu();
    let that = this;

    window.onresize = () => {
      return (() => {
        that.srceenWidth = document.body.clientWidth;
      })();
    };
    debugger;
    if (
      this.$route.name === "首页" ||
      this.$route.name === "消息中心" ||
      this.$route.name === "便签" ||
      this.$route.name === "Profile" ||
      this.$route.name === "流程查询"
    ) {
      this.current = -1;
    } else if (
      this.$route.path === "/TestList/docSearch" ||
      this.$route.path === "/projectShowPage/projectShowPage" ||
      this.$route.path === "/report/fineReport"
    ) {
      //sessionStorage.setItem('nowPath', route.matched[0].name)
      var $this = this;
      this.levelList.map((item, index) => {
        if (item.meta.title === $this.$route.meta.title) {
          $this.current = index;
        }
      });
    } else {
      this.levelList.map((item, index) => {
        if (item.name === this.$route.matched[0].name) {
          this.current = index;
        }
      });
      if (this.moreMenu.length > 0) {
        this.moreMenu.map((item, index) => {
          if (item.name === this.$route.matched[0].name) {
            this.current = index + this.levelList.length;
          }
        });
      }
    }
    this.levelListImg();
  },
  methods: {
    levelListImg() {
      debugger;
      var $this = this;
      console.log('current:', this.current);
      console.log('menuList:', this.menuList);
      this.menuList.forEach((item, index) => {
        if (
          item.meta.title == "文档查询" ||
          item.meta.title == "项目展示库" ||
          item.meta.title == "展示库维护" ||
          item.meta.title == "数据集成监控"
        ) {
          item.img = require("@/assets/image/d.png");
          if (
            $this.$route.meta.title === item.meta.title &&
            index === $this.current
          ) {
            $this.newDefault(item);
          }
        } else if (item.meta.title == "业务标准库") {
          item.img = require("@/assets/image/c.png");
          if (
            ($this.$route.meta.title === item.meta.title ||
              $this.$route.meta.title === "典型案例" ||
              $this.$route.meta.title === "业务手册") &&
            index === $this.current
          ) {
            $this.newDefault(item);
          }
        } else if (
          item.meta.title == "企业专家库" ||
          item.meta.title == "驳回意见"
        ) {
          item.img = require("@/assets/image/e.png");
          if (
            $this.$route.meta.title === item.meta.title &&
            index === $this.current
          ) {
            $this.newDefault(item);
          }
        } else if (item.meta.title == "项目负责人工作台") {
          item.img = require("@/assets/image/a.png");
          if (
            $this.$route.meta.title === item.meta.title &&
            index === $this.current
          ) {
            $this.newDefault(item);
          }
        } else if (item.meta.title == "项目工作台") {
          item.img = require("@/assets/image/b.png");
          if (
            $this.$route.meta.title === item.meta.title &&
            index === $this.current
          ) {
            $this.newDefault(item);
          }
        } else if (item.meta.title == "系统管理") {
          item.img = require("@/assets/image/f.png");
          if (
            $this.$route.meta.title === item.meta.title &&
            index === $this.current
          ) {
            $this.newDefault(item);
          }
        }
      });
    },
    newDefault(item) {
      if (item.name === "ProjectLeader") {
        this.projectLeaderItem = item;
        if (
          JSON.parse(sessionStorage.getItem("userinfo") || {})
            .isOpenProjectLeader
        ) {
          adminAuthorizeLeaderList({
            userId: JSON.parse(sessionStorage.getItem("userinfo") || {}).userId,
            role: "1",
          }).then((res) => {
            this.options = res.data;
            this.dialogVisible = true;
            if (res.data && res.data.length) {
              this.projectLeaderName = res.data[0].leader;
            }
          });
        } else {
          this.dialogVisible = false;
          this.projectLeaderName = JSON.parse(
            sessionStorage.getItem("userinfo") || {}
          ).userId;
          this.sumbit();
        }
      } else if (item.name === "TestList") {
        sessionStorage.setItem("nowPath", item.name);
        this.getLeftMenu();
        const { redirect, path, children } = item;
        if (redirect && redirect !== "noRedirect") {
          this.$router.push(redirect);
          return;
        }
        if (children) {
          if (children[0].children) {
            this.$router.push(
              path + "/" + children[0].path + "/" + children[0].children[0].path
            );
            return;
          }
          this.$router.push(path + "/" + children[0].path);
          return;
        }
        this.$router.push(this.pathCompile(path));
      } else {
        sessionStorage.setItem("nowPath", item.name);
        this.getLeftMenu();
        const { redirect, path, children } = item;
        if (redirect && redirect !== "noRedirect") {
          this.$router.push(redirect);
          return;
        }
        if (children) {
          if (children[0].children) {
            this.$router.push(
              path + "/" + children[0].path + "/" + children[0].children[0].path
            );
            return;
          }
          this.$router.push(path + "/" + children[0].path);
          return;
        }
        this.$router.push(this.pathCompile(path));
      }
    },
    getBreadcrumb() {
      let menuArr = this.permission_routes.filter(
        (item) =>
          item.meta &&
          item.meta.title &&
          item.name !== "ProjectList" &&
          item.name !== "BusinessWorkbench"
      );
      this.menuList = menuArr;
      if (this.srceenWidth > 1900) {
        if (menuArr.length > 6) {
          this.isMore = true;
          // this.levelList = menuArr.slice(0, 9)
          // this.moreMenu = menuArr.slice(9)
          this.levelList = menuArr.slice(0, 6);
          this.moreMenu = menuArr.slice(6);
        } else {
          this.isMore = true;
          // this.levelList = menuArr
          this.isMore = false;
          this.levelList = menuArr;
        }
      } else if (this.srceenWidth >= 1680 && this.srceenWidth < 1900) {
        if (menuArr.length > 6) {
          this.isMore = true;
          // this.levelList = menuArr.slice(0, 7)
          // this.moreMenu = menuArr.slice(7)
          this.levelList = menuArr.slice(0, 5);
          this.moreMenu = menuArr.slice(5);
        } else {
          this.isMore = false;
          this.levelList = menuArr;
        }
      } else if (this.srceenWidth < 1680 && this.srceenWidth >= 1450) {
        if (menuArr.length > 5) {
          this.isMore = true;
          // this.levelList = menuArr.slice(0, 6)
          // this.moreMenu = menuArr.slice(6)
          this.levelList = menuArr.slice(0, 4);
          this.moreMenu = menuArr.slice(4);
        } else {
          this.isMore = false;
          this.levelList = menuArr;
        }
      } else if (this.srceenWidth < 1450 && this.srceenWidth >= 1280) {
        if (menuArr.length > 4) {
          this.isMore = true;
          // this.levelList = menuArr.slice(0, 4)
          // this.moreMenu = menuArr.slice(4)
          this.levelList = menuArr.slice(0, 3);
          this.moreMenu = menuArr.slice(3);
        } else {
          this.isMore = false;
          this.levelList = menuArr;
        }
      } else {
        if (menuArr.length > 3) {
          this.isMore = true;
          this.levelList = menuArr.slice(0, 3);
          this.moreMenu = menuArr.slice(3);
        } else {
          this.isMore = false;
          this.levelList = menuArr;
        }
      }
      if (this.$route.name == "首页") {
        this.levelListImg();
      }
      // only show routes with meta.title
      // let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
      // const first = matched[0]
      // if (!this.isDashboard(first)) {
      //   matched = [{ path: '/index', meta: { title: '首页' } }].concat(matched)
      // }
      // this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
      // this.$nextTick(function () {
      // var sheet = document.getElementsByClassName("app-breadcrumb")[0].childNodes[0];
      // this.titleText = sheet.getElementsByClassName("isnew").item(0).innerText;
      // if(levelLiNodes == '文档查询'){
      //   console.log('1')
      //   this.levelList = this.levelList.map(item=>{
      //     if(item.meta.title == levelLiNodes){
      //       console.log('22')
      //       item.img = require("@/assets/image/d.png")
      //     }
      //     return item
      //   })
      // }
      // console.log(levelLiNodes,'levelList')
      // })
    },
    isDashboard(route) {
      const name = route && route.name;
      if (!name) {
        return false;
      }
      return name.trim() === "首页";
    },
    pathCompile(path) {
      const { params } = this.$route;
      var toPath = pathToRegexp.compile(path);
      return toPath(params);
    },
    handleLink(item, index) {
      this.levelListImg();
      if (
        item.meta.title == "文档查询" ||
        item.meta.title == "项目展示库" ||
        item.meta.title == "展示库维护" ||
        item.meta.title == "数据集成监控"
      ) {
        item.img = require("@/assets/image/d1.png");
      } else if (item.meta.title == "业务标准库") {
        item.img = require("@/assets/image/c1.png");
      } else if (
        item.meta.title == "企业专家库" ||
        item.meta.title == "驳回意见"
      ) {
        item.img = require("@/assets/image/e1.png");
      } else if (item.meta.title == "项目负责人工作台") {
        item.img = require("@/assets/image/a1.png");
      } else if (item.meta.title == "项目工作台") {
        item.img = require("@/assets/image/b1.png");
      } else if (item.meta.title == "系统管理") {
        item.img = require("@/assets/image/f1.png");
      }
      this.current = index;
      this.newDefault(item);
    },
    getLeftMenu() {
      this.leftRoutes = [];
      // let name = this.$route.matched[0].name
      let name = sessionStorage.getItem("nowPath");

      this.permission_routes.map((item) => {
        if (item.name === name) {
          this.leftRoutes = JSON.parse(JSON.stringify(item.children) || {});
        }
      });
      if (name === "ProjectLeader") {
        console.log("projectLeaderName1: " + this.projectLeaderName);
        this.projectLeaderName =
          this.projectLeaderName || this.$route.params.id;
        // this.projectLeaderName = this.$route.params.id
        this.leftRoutes.map((item) => {
          item.name = item.name.replace("/:id", "");
          item.path =
            name.replace(name[0], name[0].toLowerCase()) +
            "/" +
            item.path.replace("/:id", "") +
            "/" +
            this.projectLeaderName;
        });
      } else {
        this.leftRoutes.map((item) => {
          item.path =
            name.replace(name[0], name[0].toLowerCase()) + "/" + item.path;
        });
      }

      // console.log(this.leftRoutes, 'leftRoutes')
      this.$store.commit("LEFT_ROUTES", this.leftRoutes);
    },
    handleCommand(item) {

      this.levelListImg();
      this.current = this.levelList.length + item.index;
      console.log(this.current);
      sessionStorage.setItem("nowPath", item.item.name);
      this.getLeftMenu();
      const { redirect, path, children } = item.item;
      if (redirect && redirect !== "noRedirect") {
        this.$router.push(redirect);
        return;
      }

      let ropath = "";
      if (children) {
        if (children[0].children) {
          ropath =
            path + "/" + children[0].path + "/" + children[0].children[0].path;
          if (path == "/projectLeader") {
            this.$router.push(
              ropath.replace(
                ":id",
                JSON.parse(sessionStorage.getItem("userinfo") || {}).userId
              )
            );
            this.$nextTick(() => {
              this.newDefault(item.item);
            });
          } else {
            this.$router.push(ropath);
          }
          return;
        }
        ropath = path + "/" + children[0].path;
        if (path == "/projectLeader") {
          this.$router.push(
            ropath.replace(
              ":id",
              JSON.parse(sessionStorage.getItem("userinfo") || {}).userId
            )
          );
          this.$nextTick(() => {
            this.newDefault(item.item);
          });
        } else {
          this.$router.push(ropath);
        }
        return;
      }
      this.$router.push(this.pathCompile(path));
    },
    sumbit() {
      debugger;
      sessionStorage.setItem("nowPath", "ProjectLeader");
      this.getLeftMenu();
      console.log("projectLeaderName2: " + this.projectLeaderName);
      const { redirect, path, children } = this.projectLeaderItem;
      this.dialogVisible = false;
      if (redirect && redirect !== "noRedirect") {
        this.$router.push(redirect);
        return;
      }

      if (children) {
        if (children[0].children) {
          this.$router.push(
            path +
              "/" +
              children[0].path.replace("/:id", "") +
              "/" +
              children[0].children[0].path.replace("/:id", "") +
              "/" +
              this.projectLeaderName
          );
          return;
        }
        // this.$router.push('/projectLeader/projectGlance/6e4e300e-82e8-11ea-b423-00163e0c7958')
        this.$router.push(
          path +
            "/" +
            children[0].path.replace("/:id", "") +
            "/" +
            this.projectLeaderName
        );
        return;
      }
      this.$router.push(this.pathCompile(path) + "/" + this.projectLeaderName);
    },
  },
};
</script>

<style lang="scss" scoped>
.titleMenu {
  display: inline-block;
  // margin-right: 35px;
  font-weight: 600;
  font-size: 16px;
  font-family: FZLTZHK;
  color: #909399;
  padding-top: 10px;
  margin-left: 5px;
  margin-right: 5px;
  a {
    position: relative;
    left: -11%;
  }
}
.isnew {
  border-top: 4px solid #4554c5;
  background: #f3f6fa;
  box-shadow: 0px 5px 4px 0px rgba(195, 195, 195, 0.5) inset;
}
.level-icon {
  display: block;
  float: left;
  position: relative;
  left: 40%;
}
.titleMenu:last-child {
  margin-right: 0;
}
.actived {
  color: #4554c5;
  // border-bottom: 3px solid #409eff;
  padding-bottom: 8px;
}
.isActived {
  color: #4554c5;
}

.app-breadcrumb.el-breadcrumb {
  display: inline-block;
  font-family: Microsoft YaHei;
  font-size: 18px;
  color: #001529;
  letter-spacing: -0.22px;
  line-height: 80px;

  .no-redirect {
    color: #97a8be;
    cursor: text;
  }
}

.el-breadcrumb__item:last-child .el-breadcrumb__inner a {
  color: #303133;
}

.el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover {
  cursor: pointer;
  color: #1890ff;
}

.moreMenu {
  display: inline-block;
  cursor: pointer;
}
</style>
